<template>
    <div class="container">
            <img
            src="@/assets/Assets/logo.png"
            alt="logo"
            >
        <div class="selsec-container">
            <div class="select border" @click="showOption">
                <img src="@/assets/Assets/alipay.png"
                alt="支付宝" class="img" v-if="selectIsShow==='alipay'">
                <img src="@/assets/Assets/applepay_small.png"
                alt="苹果支付" class="img" v-if="selectIsShow==='applepay'">
                <img src="@/assets/Assets/wechatpay.png"
                alt="微信支付" class="img" v-if="selectIsShow==='wechatpay'">
            </div>
            <div class="option-container" v-if="optionIsShow">
                <div class="option-child">
                    <div class="option border" @click="change('alipay')">
                    <img src="@/assets/Assets/alipay.png" alt="" class="img">
                    </div>
                </div>
                <div class="option-child">
                    <div class="option border"
                    @click="change('applepay')">
                    <img src="@/assets/Assets/applepay_small.png" alt="" class="img">
                    </div>
                </div>
                <div class="option-child">
                    <div class="option border"
                    @click="change('wechatpay')">
                        <img src="@/assets/Assets/wechatpay.png" alt="" class="img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { set, get } from '@/common/utils';

export default {
  data() {
    return {
      optionIsShow: false,
      selectIsShow: '',
    };
  },
  created() {
    const result = get('payment');
    if (result) {
      this.$data.selectIsShow = result;
    } else {
      this.$data.selectIsShow = '';
    }
  },
  methods: {
    showOption() {
      this.$data.optionIsShow = !this.$data.optionIsShow;
    },
    change(v) {
      this.$data.selectIsShow = v;
      this.$data.optionIsShow = false;
      set('payment', v);
    },
  },
};
</script>

<style lang="scss" scoped>

.container{
    display : flex;
    flex-direction : column;
    align-items : center;
}

.select{
    width : 300px;
    height : 30px;
    background-color : #ece9e9;
}
.select:hover{
    border-color : blue;
}
.option-container{
    display : flex;
    flex-direction : column;
    align-items : center;
    padding : 10px 0;
    margin-top : 15px;
    border : 1px solid #cccccc;
    border-radius : 5px;
    .option-child{

        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : center;
        width : 100%;
        padding : 10px 0;
    }
    .option-child:hover{
        background-color : #faf9f9;
    }
}
.border{
    display : flex;
    justify-content : center;
    cursor :pointer;
    border : 1px solid #cccccc;
    border-radius : 20px;
}
.option{
    width : 260px;
    height : 30px;
    background-color : #ffffff;
}
.img{
    height : 30px;
}

</style>
